﻿@model Leads360Express.Repository.Pages.EmailSummary.EmailSummaryModel
@{
    ViewBag.Title = "Email Result Summary";
    Layout = "~/Views/EmailSummary/_EmailSummaryLayout.cshtml";

    ViewData["strFrom"] = DateTime.Now.AddDays(-7).ToShortDateString();
    ViewData["strTo"] = DateTime.Now.ToShortDateString();
}
<form method="post" class="form" id="viewEmailSummary">
    <fieldset>
        <div class="content" style="position: relative;">
            <h2 class="app">
                <strong>Email Summary</strong>
                @Html.Partial("_PatialLeads_Calls", @Model.LeadCall )
            </h2>

            <div class="toolbar topblue">
                <span class="area" >
                    <div class="select-holder combobox-mid spl">
                        <select id="SelectTemplates" data-bind='value: TemplateOpt, foreach: AllTemplateOptions, optionsCaption: "All Templates"' class="editable-select" style="width: 138px;">
                            <option data-bind="value: ID, text: ItemName"></option>
                        </select>
                    </div>
                    @*<div class="select-holder combobox-mid spl">
                        <select id="SelectTemplates" class="editable-select" style="width: 138px;">
                            <option value="1">Test long title of all templates</option>
                        </select>
                    </div>*@

                    <div class="select-holder combobox-mid spl">
                        <select id="SelectLeadSources" data-bind='value: LeadSourceOpt, foreach: AllLeadSourceOptions, optionsCaption: "All Lead Sources"' class="editable-select" style="width: 138px;">
                            <option data-bind="value: ID, text: ItemName"></option>
                        </select>
                    </div>
                    <div class="select-holder combobox-mid">
                        <select id="SelectEmails" data-bind='value: EmailOpt, foreach: AllEmailOptions, optionsCaption: "All Emails"' class="editable-select" style="width: 138px;">
                            <option data-bind="value: ID, text: ItemName"></option>
                        </select>
                    </div>
                </span>

                <span class="area">
                    <span class="spl"><strong>Date Sent:</strong></span>
                    <input type="radio" class="radio spl" name="range" value="true" data-bind="checked: RangeOption"  />
                    <div id="selectDataHolder" class="select-holder sel-range spl"  style="width: 110px;">
                        <select id="selectDate" data-bind='enable: RangeEnable, value: DateSent, foreach: DateSentOptions, optionsCaption: "Today"' style="width: 100px;">
                            <option data-bind="value: RangeValue, text: RangeName"></option>
                        </select>
                    </div>
                    <span class="spl" style="padding-left:3px;">or</span>
                    <input type="radio" class="radio spl" name="range" value="false" data-bind="checked: RangeOption" />
                    <label for="txt-from" class="spl" style="font-weight:normal;">From:</label>
                    <input type="text" id="startDate" value= @ViewData["strFrom"]  class="text date spl" data-bind="enable: FromDateEnable" />
                    <label for="txt-from" class="spl" style="font-weight:normal;padding-left:3px;">To:</label>
                    <input type="text" id="endDate" value= @ViewData["strTo"] class="text date" data-bind="enable: ToDateEnable"/>
                </span>
                <span class="area left">
                    <a class="btn btn-go" href="javascript:void(1);" data-bind="click: GoButton" >Go</a>
                </span>
            </div>

            <div class="panel">
                <div class="table table-metrics emails-summary">
                    <div class="title">
                        <div class="col1">Total Verified<br />Email Results</div>
                        <div class="col1 col2">Emails <br />Delivered</div>
                        <div class="col1 col3">Emails <br />rejected</div>
                        <div class="col1 col4">Spam <br />Complaints</div>
                        <div class="col1 col5">Hard <br />Bounces</div>
                        <div class="col1 col6">Unknown <br />Users</div>
                        <div class="col1 col7">Soft <br />Bounces</div>
                    </div>
                    <div class="line">
                        <div class="col1"><span data-bind="text: TotalResults"></span></div>
                        <div class="col1 col2">
                            <span data-bind="text: DeliverPercent"></span>
                            <span data-bind="if: HasDelivered" class="blocknote">
                                (<span data-bind='text: TotalDelivered'></span>)
                            </span>
                        </div>
                        <div class="col1 col3">
                            <span data-bind="text: RejectPercent"></span>
                            <span data-bind="if: HasReject" class="blocknote">
                                (<a href="#" data-bind='click: RejectClick, text: TotalRejected, attr: {class: RejectedClass}'></a>)
                            </span>
                        </div>
                        <div class="col1 col4">
                            <span data-bind="text: SpamPercent"></span>
                            <span data-bind="if: HasSpam" class="blocknote">
                                (<a href="#" data-bind='click: SpamClick, text: SpamComplaints, attr: {class: SpamClass}'></a>)
                            </span>
                        </div>
                        <div class="col1 col5">
                            <span data-bind="text: hBouncePercent"></span>
                            <span data-bind="if: HasHBounce" class="blocknote">
                                (<a href="#" data-bind='click: HBounceClick, text: HardBounces, attr: {class: hBounceClass}'></a>)
                            </span>
                        </div>
                        <div class="col1 col5">
                            <span data-bind="text: UnknownUPercent"></span>
                            <span data-bind="if: HasUnknown" class="blocknote">
                                (<a href="#" data-bind='click: UnknownUClick, text: UnknownUsers, attr: {class: UnknownUClass}'></a>)
                            </span>
                        </div>
                        <div class="col1 col5">
                            <span data-bind="text: sBouncePercent"></span>
                            <span data-bind="if: HasSBounce" class="blocknote">
                                (<a href="#" data-bind='click: SBounceClick, text: SoftBounces, attr: {class: sBounceClass}'></a>)
                            </span>
                        </div>
                    </div>
                    <div class="spacer15"></div>
                </div>
            </div>

            <!-- *************************** List Email result detail ********************************* -->
            <div data-bind="attr: {'class': ListEmailClass}">
                <div class="title nomargin">
                    <h3 data-bind='text: EmailType'></h3>
                    <!--<span class="right-btns" style="margin-top:4px;margin-right:3px;">
                        <a class="btn btn-exportexcel" style="margin-right: 5px;" href='@Url.Action("ExportExcel")'>Export to Excel</a>
                        Records:<span data-bind='text: EmailRecords'></span>
                    </span>-->
                </div>

                <div data-bind="attr: {'class': PagingClass}">
                    <span class="show">Show <input type="text" class="text" id="pagesize" data-bind='value: PageSize, attr: {maxlength: 3}' value="10" /> per page<span class="smallText" data-bind="text: PageSizeText"></span></span>
                    <span class="pages"><span class="smallText" data-bind="text: PageCurrentText"></span>Page <input type="text" class="text" id="pagecurrent" onkeypress="return isNumberKey(event)" data-bind='value: CurrentPageIndex, event: { keypress: RunSomethingKey }'  value="1" /> of <span data-bind='text: MaxPageIndex'></span>
                    <a href="#" data-bind="click: PreviousPage, attr: {'class': PrevButtonClass}">Prev</a>
                    <a href="#" data-bind="click: NextPage, attr: {'class': NextButtonClass}">Next</a>
                    </span>
                </div>

                <div class="table table-leads emailsummaryrow">
                    <div class="title">
                        <div class="col1" data-bind='click: function(event) { SetOrder(event, "LeadId")}'>
                            <span class="w">
                                <a href="#">Lead ID</a>
                                <div class="sort_wrapper" id="LeadId">
                                    <span class="grid_order ui_icon"></span>
                                </div>
                            </span>
                        </div>
                        <div class="col1 col2" data-bind='click: function(event) { SetOrder(event, "EmailAddress")}'>
                            <span class="w">
                                <a href="#">Email</a>
                                <div class="sort_wrapper" id="EmailAddress">
                                    <span class="grid_order ui_icon"></span>
                                </div>
                            </span>
                        </div>
                        <div class="col1 col3" data-bind='click: function(event) { SetOrder(event, "EmailTemplateTitle")}'>
                            <span class="w">
                                <a href="#">Template</a>
                                <div class="sort_wrapper" id="EmailTemplateTitle">
                                    <span class="grid_order ui_icon"></span>
                                </div>
                            </span>
                        </div>
                        <div class="col1 col4" data-bind='click: function(event) { SetOrder(event, "LogDate")}'>
                            <span class="w">
                                <a href="#">Log Date</a>
                                <div class="sort_wrapper" id="LogDate">
                                    <span class="grid_order ui_icon"></span>
                                </div>
                            </span>
                        </div>
                        <div class="col1 col5" data-bind='click: function(event) { SetOrder(event, "FailureReason")}'>
                            <span class="w">
                                <a href="#">Failure Reason</a>
                                <div class="sort_wrapper" id="FailureReason">
                                    <span class="grid_order ui_icon"></span>
                                </div>
                            </span>
                        </div>
                        <div class="col1 col6" data-bind='click: function(event) { SetOrder(event, "EmailStatus")}'>
                            <span class="w">
                                <a href="#">Email Status</a>
                                <div class="sort_wrapper" id="EmailStatus">
                                    <span class="grid_order ui_icon"></span>
                                </div>
                            </span>
                        </div>
                    </div>

                    <div data-bind="foreach: itemsOnCurrentPage">
                        <div class="line">
                            <div class="col1"><span class="w" style="min-height: 12px;" data-bind='text: LeadId'></span></div>
                            <div class="col1 col2"><span class="w" style="min-height: 12px;" data-bind='text: EmailAddress'></span></div>
                            <div class="col1 col3"><span class="w" style="min-height: 12px;" data-bind='text: EmailTemplateTitle'></span></div>
                            <div class="col1 col4"><span class="w" style="min-height: 12px;" data-bind='text: LogDate'></span></div>
                            <div class="col1 col5"><span class="w" style="min-height: 12px;" data-bind='text: FailureReason'></span></div>
                            <div class="col1 col6"><span class="w" style="min-height: 12px;" data-bind='text: EmailStatus'></span></div>
                        </div>
                    </div>
                </div>
            </div>

            @Html.Partial("_Footer.Copyright")
        </div><!-- //.content -->
    </fieldset>
</form>

<script type="text/javascript">
//<![CDATA[
    $(function() {
        $("#startDate").datepicker();
        $("#endDate").datepicker();
    });

    var data = @(Html.Raw(Json.Encode(Model)));
//]]>
</script>
<script src="~/Scripts/viewModel/EmailSummaryViewModel.js" type="text/javascript"></script>
